import Draw from 'ol/interaction/Draw.js';

import Overlay from 'ol/Overlay.js';

import {
	Circle as CircleStyle,
	Fill,
	Stroke,
	Style
} from 'ol/style.js';
import {
	LineString,
	Polygon
} from 'ol/geom.js';
import {
	Vector as VectorSource
} from 'ol/source.js';
import {
	Tile as TileLayer,
	Vector as VectorLayer
} from 'ol/layer.js';
import {
	getArea,
	getLength
} from 'ol/sphere.js';
import {
	unByKey
} from 'ol/Observable.js';

export default class Measure {
	map;

	/**
	 * 草图工具.
	 * @type {import("../src/ol/Feature.js").default}
	 */
	sketch;

	/**
	 * 绘图工具
	 */
	draw;

	/**
	 * 气泡提示
	 * @type {HTMLElement}
	 */
	helpTooltipElement;


	/**
	 * 弹框消息
	 * @type {Overlay}
	 */
	helpTooltip;

	/**
	 *测量信息
	 * @type {HTMLElement}
	 */
	measureTooltipElement;

	/**
	 * 测量弹框.
	 * @type {Overlay}
	 */
	measureTooltip;

	/**
	 * 绘制时提示信息.
	 * @type {string}
	 */
	continuePolygonMsg = '单击绘制面';

	/**
	 * 距离测量提示信息.
	 * @type {string}
	 */
	continueLineMsg = '单击绘制线';

	constructor(map) {
		this.map = map;
		this.source = new VectorSource();
		this.vector = new VectorLayer({
			source: this.source,
			style: {
				'fill-color': 'rgba(255, 133, 25, 0.2)',
				'stroke-color': '#ffcc33',
				'stroke-width': 2,
				'circle-radius': 7,
				'circle-fill-color': '#ffcc33',
			},
		});
		this.map.addLayer(this.vector)

		// this.moveListener = this.map.on('pointermove', this.pointerMoveHandler);
		// this.map.getViewport().addEventListener('mouseout', () => {
		//     this.helpTooltipElement.classList.add('hidden');
		// });
	}


	/**
	 * 鼠标移动事件
	 * @param {*} evt 
	 * @returns 
	 */
	// pointerMoveHandler(evt) {
	//     if (evt.dragging) {
	//         return;
	//     }
	//     /** @type {string} */
	//     let helpMsg = '开始绘制';

	//     if (this.sketch) {
	//         const geom = this.sketch.getGeometry();
	//         if (geom instanceof Polygon) {
	//             helpMsg = this.continuePolygonMsg;
	//         } else if (geom instanceof LineString) {
	//             helpMsg = this.continueLineMsg;
	//         }
	//     }

	//     this.helpTooltipElement.innerHTML = helpMsg;
	//     this.helpTooltip.setPosition(evt.coordinate);
	//     this.helpTooltipElement.classList.remove('hidden');
	// }

	measureLength() {
		if (!this.map) {
			return
		}

		if (this.draw) {
			this.map.removeInteraction(this.draw)
		}
		this.addInteraction('LineString');
	}
	measureArea() {
		if (!this.map) {
			return

		}
		if (this.draw) {
			this.map.removeInteraction(this.draw)
		}
		this.addInteraction('Polygon');

	}
	clear() {
		
		if (this.draw) {
			this.map.removeInteraction(this.draw)
		}
		if (this.source) {
			this.source.clear()
		}
		if (this.measureTooltipElement) {
			this.measureTooltipElement.innerHTML = ""
			this.measureTooltipElement.style = "display:none"
		}
		if (this.measureTooltip) {
			this.map.removeOverlay(this.measureTooltip)
			this.measureTooltip = null
		}
		console.log(111)
		

	}

	formatLength(line) {
		const length = getLength(line);
		let output;
		if (length > 100) {
			output = Math.round((length / 1000) * 100) / 100 + ' ' + 'km';
		} else {
			output = Math.round(length * 100) / 100 + ' ' + 'm';
		}
		return output;
	}
	formatArea(polygon) {
		const area = getArea(polygon);
		let output;
		if (area > 10000) {
			output = Math.round((area / 1000000) * 100) / 100 + ' ' + 'km<sup>2</sup>';
		} else {
			output = Math.round(area * 100) / 100 + ' ' + 'm<sup>2</sup>';
		}
		return output;
	}

	addInteraction(type) {
		this.draw = new Draw({
			source: this.source,
			type: type,
			style: new Style({
				fill: new Fill({
					color: 'rgba(255, 255, 255, 0.2)',
				}),
				stroke: new Stroke({
					color: 'rgba(255, 233, 132,0.8)',
					lineDash: [10, 10],
					width: 2,
				}),
				image: new CircleStyle({
					radius: 5,
					stroke: new Stroke({
						color: 'rgba(0, 0, 0, 0.7)',
					}),
					fill: new Fill({
						color: 'rgba(255, 255, 255, 0.2)',
					}),
				}),
			}),
		});
		this.map.addInteraction(this.draw);

		this.createMeasureTooltip();
		// this.createHelpTooltip();

		let listener;
		this.draw.on('drawstart', (evt) => {
			// set sketch
			this.sketch = evt.feature;

			/** @type {import("../src/ol/coordinate.js").Coordinate|undefined} */
			let tooltipCoord = evt.coordinate;

			listener = this.sketch.getGeometry().on('change', (evt) => {
				const geom = evt.target;
				let output;
				if (geom instanceof Polygon) {
					output = this.formatArea(geom);
					tooltipCoord = geom.getInteriorPoint().getCoordinates();
				} else if (geom instanceof LineString) {
					output = this.formatLength(geom);
					tooltipCoord = geom.getLastCoordinate();
				}
				this.measureTooltipElement.innerHTML = output;
				this.measureTooltip.setPosition(tooltipCoord);
			});
		});

		this.draw.on('drawend', () => {
			this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-static';
			this.measureTooltip.setOffset([0, -7]);
			// unset sketch
			this.sketch = null;
			// unset tooltip so that a new one can be created
			this.measureTooltipElement = null;
			this.createMeasureTooltip();
			unByKey(listener);
		});
	}
	createMeasureTooltip() {
		if (this.measureTooltipElement) {
			this.measureTooltipElement.parentNode.removeChild(this.measureTooltipElement);
		}
		this.measureTooltipElement = document.createElement('div');
		this.measureTooltipElement.className = 'ol-tooltip ol-tooltip-measure';
		this.measureTooltipElement.style = `position: relative;
		  background: rgba(0, 0, 0, 0.5);
		  border-radius: 4px;
		  display:block;
        color: white;
        padding: 4px 8px;
        opacity: 0.7;
        white-space: nowrap;
        font-size: 12px;
        cursor: default;
        user-select: none;`

		this.measureTooltip = new Overlay({
			element: this.measureTooltipElement,
			offset: [0, -15],
			positioning: 'bottom-center',
			stopEvent: false,
			insertFirst: false,
		});
		this.map.addOverlay(this.measureTooltip);
	}
	createHelpTooltip() {
		if (this.helpTooltipElement) {
			this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
		}
		this.helpTooltipElement = document.createElement('div');
		this.helpTooltipElement.className = 'ol-tooltip hidden';
		this.helpTooltip = new Overlay({
			element: this.helpTooltipElement,
			offset: [15, 0],
			positioning: 'center-left',
		});
		this.map.addOverlay(this.helpTooltip);
	}
	destroy() {
		// if (this.moveListener) {
		//     unByKey(this.moveListener)
		// }

		this.sketch = null
		this.draw = null
	}

}